<template>
  <div style="background-color: #fff">
    <homeHead :showLeft="true" :name="'高级检索'"></homeHead>
    <div class="middle" style="background: rgb(242, 242, 242)">
      请输入检索条件
    </div>
    <div class="last">
      <ul class="form">
        <li>
          <span class="add">+</span>
          <span class="substr">-</span>
          <div class="sel" @click="clickSelect(1,selectFirst.name,'first')">
            <span style="margin-left: 5px; float: left">{{ selectFirst.name }}</span>
            <img src="@/assets/img/select.png" alt="" />
          </div>
          <div class="input">
            <input type="text"  v-model="selectFirst.input"/>
          </div>
        </li>
      </ul>
      <ul class="form">
        <li v-for="(item, index) in searchAry" :key="index">
          <div class="sel" style="width: 78px" @click="clickStatus(index,item.status)">
            <span style="margin-left: 5px; float: left">{{ item.status }}</span>
            <!-- <span class="iconfont">&#xe631;</span> -->
            <img src="@/assets/img/select.png" alt="" />
          </div>
          <div class="sel" @click="clickSelect(index,item.name)">
            <span style="margin-left: 5px; float: left">{{ item.name }}</span>
            <!-- <span class="iconfont">&#xe631;</span> -->

            <img src="@/assets/img/select.png" alt="" />
          </div>
          <div class="input">
            <input type="text" v-model="item.input" />
          </div>
        </li>
      </ul>
      <div class="btn" @click="search">检索</div>
    </div>

    <!-- 下拉列表 -->
    <mt-popup v-model="selectChoose" pointer-events="none" position="bottom">
      <mt-picker   :show-toolbar="true" ref="picker" :slots="selectObj" @change="onValuesChange">
         <div class="listButton">
                <mt-button @click="clickConfirm" style="background:#367bf0;color:#fff" class="sure">确认</mt-button>
          </div>
      </mt-picker>
    </mt-popup>
    <!-- 条件列表 -->
    <mt-popup v-model="statusChoose" pointer-events="none" position="bottom">
      <mt-picker  :show-toolbar="true" ref="pickerStatus" :slots="selectStatus" @change="onStatusChange">
         <div class="listButton">
                <mt-button @click="clickConfirm" style="background:#367bf0;color:#fff" class="sure">确认</mt-button>
          </div>
      </mt-picker>
    </mt-popup>
  </div>
</template>

<script>
import homeHead from "./homeHead.vue";
export default {
  watch: {},
  data() {
    return {
      cloneElement: null,
      selectChoose: false,
      statusChoose: false,
      selectObj: [
        {
          flex: 1,
          values: ["题名", "全文", "关键词"],
          className: "slot1",
          textAlign: "center",
        },
      ],
      selectStatus: [
        {
          flex: 1,
          values: ["并且", "或者"],
          className: "slot1",
          textAlign: "center",
        },
      ],
      selectFirst:{
          name:"题名",
          input:"",
      },
      firstStatus:false,
      searchAry: [{ status: "并且", name: "题名",input:"" }],
      searchIndex: null,
      searchObject:{},
    };
  },
  created() {
      this.searchObject.type = Number(this.$route.query.type);
      this.searchObject.orderstr = this.$route.query.orderstr;
      this.searchObject.pagenow = 1;
      this.searchObject.pagesize = 10;
  },
  mounted() {
    let _this = this;
    //   添加
    $(".add").each((i, dom) => {
      $(dom).click(function () {
        _this.searchAry.push({ status: "并且", name: "题名",input:"" });
      });
    });

    // 删除
    $(".substr").each((i, dom) => {
      $(dom).click(function () {
        if (_this.searchAry.length === 0) return;
        _this.searchAry.pop();
      });
    });
  },
  methods: {
    search() {
        let ary = [this.selectFirst].concat(this.searchAry);
        ary = ary.map(i=>{
            let obj = "";
            if(i.status) {
                if(i.status === "并且") { 
                  if(i.input) {   
                    obj = ` AND ${i.name}%=${i.input}`
                  }
                }else { 
                  if(i.input) {
                    obj = ` OR ${i.name}%=${i.input}`
                  }
                }
            }else { 
              if(i.input) { 
                obj = `${i.name}%=${i.input}`
              }
            }
            return obj
        });   
        let str = ary.join("");
        if(str.substring(0,3) === " AN"  ) {
          str = str.substring(5)
        } 
        if(str.substring(0,3) === " OR") {
          str = str.substring(4)
        }
        this.searchObject.wherestr = encodeURI(str);  
        let target = JSON.stringify(this.searchObject);
        this.$router.push({path:"/searchResult",query:{searchMore:target}})
    },
    /* 题名 */
    onValuesChange(picker, values) {
        if(this.firstStatus) return this.selectFirst.name = values[0]; 
        if(this.searchAry[this.searchIndex]) {
          this.searchAry[this.searchIndex].name = values[0];
        }
    },
    /* 或与非 */
    onStatusChange(picker,values) { 
      if(this.searchAry[this.searchIndex]) {
        this.searchAry[this.searchIndex].status = values[0];
      }
    },
    clickSelect(index,name,k) {
        this.searchIndex = index;
        if(k === "first"){
            this.firstStatus = true; 
        }else{
            this.firstStatus = false; 
        }
        //设置每次点击初始值
        this.$refs.picker.setSlotValue(0, name);
        this.selectChoose = true;
    },
    clickStatus(index,name) {
        this.searchIndex = index;
        //设置每次点击初始值
        this.$refs.pickerStatus.setSlotValue(0, name);
        this.statusChoose = true;
    }, 
    clickConfirm() {  
      this.selectChoose = false;
      this.statusChoose = false;
    },
  },
  components: {
    homeHead: homeHead,
  },
};
</script>

<style lang="scss" scoped>
@import "../../assets/css/moreSearch.less"; 
.listButton { 
  width:100%;
  height:100%;
  text-align: right;
}
  /deep/.listButton {
    border-bottom:1px solid #ddd;
  }
</style>
